<template>
  <div class="container">
    <div class="header-wrap">
      <el-menu
        :default-active="activeIndex"
        style="padding-left: 15%"
        background-color="deepskyblue"
        mode="horizontal"
        text-color="#fff"
      >
        <el-menu-item index="1"
          ><router-link :to="{ name: 'ClubIndex' }" tag="div"
            >首页</router-link
          ></el-menu-item
        >
        <el-menu-item index="2"
          ><router-link :to="{ name: 'ClubShow' }" tag="div"
            >社团展示</router-link
          ></el-menu-item
        >
        <el-submenu index="3">
          <template slot="title"> 社团快讯 </template>
          <el-menu-item index="3-1"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              tag="div"
              >重要通知</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-2"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 2 } }"
              tag="div"
              >社团要闻</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-3"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              tag="div"
              >重要通知</router-link
            ></el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> 社团风采 </template>
          <el-menu-item index="4-1"
            ><router-link
              :to="{ name: 'ActivityList', query: { typeId: 1 } }"
              tag="div"
              >活动预告</router-link
            ></el-menu-item
          >
          <el-menu-item index="4-2"
            ><router-link
              :to="{ name: 'ActivityList', query: { typeId: 2 } }"
              tag="div"
              >精彩活动回顾</router-link
            ></el-menu-item
          >
        </el-submenu>
        <el-menu-item index="5">
          <router-link :to="{ name: 'ApplicationResult' }" tag="div"
            >个人申请查询</router-link
          >
        </el-menu-item>
        <!--     头像-->

        <div class="right-menu" style="margin-left: 80%">
          <el-dropdown style="">
            <span class="el-dropdown-link">
              <el-avatar :src="this.photo"></el-avatar>
              <span class="name">{{ this.username }}，你好</span>
            </span>
            <el-dropdown-menu style="">
              <el-dropdown-item>
                <span class="no-underline" @click="skip()">个人信息</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="logout" class="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </div>
    <div>
      <el-container>
        <el-header> </el-header>
        <div class="search-container">
          <el-input
            placeholder="输入关键字查询社团"
            v-model="searchText"
            clearable
            prefix-icon="el-icon-search"
            style="width: 30%; margin-left: 10%"
          >
          </el-input>
          <el-button @click="getClubList()">搜索</el-button>
        </div>

        <el-main>
          <table v-for="item in tableData" class="table" colspan="2">
            <td class="td-table">
              <tr class="clubName">
                {{
                  item.clubName
                }}
              </tr>
              <tr class="clubType">
                {{
                  item.clubType
                }}
              </tr>
              <tr class="button">
                <el-button
                  type="success"
                  @click="handleClickDetail(item)"
                  class="el-button"
                >
                  详细信息
                </el-button>
                <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
                  <el-form
                    :model="form"
                    :rules="form"
                    ref="form"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item
                      label="社团名称:"
                      :label-width="formLabelWidth"
                    >
                      <div>
                        {{ form.clubName }}
                      </div>
                    </el-form-item>
                    <el-form-item
                      label="社团介绍:"
                      :label-width="formLabelWidth"
                    >
                      {{ form.introduce }}
                    </el-form-item>
                    <el-form-item
                      label="社团创建日期:"
                      :label-width="formLabelWidth"
                    >
                      {{ form.createTime }}
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <el-button type="primary" @click="handleClick">申请</el-button>
                <el-dialog :visible.sync="dialogVisible">
                  <span>确定申请该社团吗？</span>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="Cancel">取 消</el-button>
                    <el-button type="primary" @click="AddApply(item.clubId)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </tr>
            </td>
          </table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import request from '@/api/request'
import decodedToken from '@/api/tokenDecode'
import router from '@/router'

export default {
  data() {
    return {
      searchText: '', //搜索框输入关键字
      tableData: [],
      isDisabled: false, //初始状态下按钮是可用的
      dialogFormVisible: false,
      dialogVisible: false,
      //详细信息表单

      username: decodedToken().claims.username,
      photo: decodedToken().claims.photo,
      form: {
        clubName: '',
        introduce: '',
        clubType: '',
        createTime: '',
      },
      formLabelWidth: '120px',
    }
  },
  methods: {
    //1.需要显示所有社团
    getClubList() {
      request
        .get('/admin/clublist', {
          params: {
            pageNum: 1,
            pageSize: 1000,
            clubName: this.searchText,
          },
        })
        .then((res) => {
          this.tableData = res.data.items
        })
    },

    handleClick() {
      this.dialogVisible = true
    },

    //按确定按钮确定申请社团
    AddApply(clubId) {
      console.log(clubId)
      const param = new URLSearchParams()
      param.append('appClubid', clubId)
      request
        .post('clubapp/appClub', param)
        .then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.dialogVisible = false
            this.$message({
              message: '已成功提交申请，请耐心等待社长处理申请',
              type: 'success',
            })
          }
        })
        .catch((error) => {
          this.$message.warning(error)
          setTimeout(() => {
            this.dialogVisible = false
          }, 1000)
        })
    },
    //取消申请,直接关闭页面
    Cancel() {
      this.dialogVisible = false
      this.$message('你已取消申请')
    },

    handleClickDetail(item) {
      console.log(item)
      this.dialogFormVisible = true
      this.form = item
    },

    //判断跳转页面
    skip() {
      if (decodedToken().claims.is_president === '是') {
        router.push('/PresidentHome')
      } else {
        router.push('/UserHome')
      }
    },

    logout() {
      //清空session
      localStorage.clear()
      router.push('/login')
    },
  },
  created() {
    this.getClubList()
  },
}
</script>
<style scoped>
/*头部导航*/
.header-wrap {
  background-color: deepskyblue;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
}
.phone-nav {
  display: none;
}
.header {
  width: 1024px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
}

.el-menu.el-menu--horizontal a {
  color: #fff;
}
.rightMenu {
  float: right;
  height: 70px;
  line-height: 70px;
  background-color: #000000;
}
a {
  text-decoration: none;
  color: #eee;
  font-size: 16px;
}

/*用户名*/
.right-menu .name {
  margin-left: 20px;
  color: #eee;
}

/* 去掉router-link下划线 */
.no-underline {
  text-decoration: none;
  color: inherit; /* 保持原本的文字颜色 */
}

/* 导航下部 */
.container {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  position: relative;
}
.table {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 89%;
  margin-top: 30px;
  margin-left: 5%;
  height: auto;
}
.td-table {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 50px;
}
.clubName {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  width: 90%;
  margin: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
}
.imformation {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  width: 98%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: gray;
  margin-bottom: 10px;
}
.button {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  width: 35%;
  margin-bottom: 5px;
}
/*详细信息按钮分离开申请按钮 */
.el-button {
  margin-right: 20px;
}
</style>
